<template>
  <div>
    <el-dialog :title='option.title' :visible.sync='isShow' @close="closeUser"  width="890px" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <el-form size="mini" ref="form" :model="form" :rules="rules"  label-width="140px"
              label-position="left">
              <el-row :gutter="10">
                <el-col :span="12" v-show="option.log == '2'">
                  <el-form-item prop="ID" label="序号">
                    <el-input v-model="form.ID" placeholder="请输入序号" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="PARAMTYPE" label="缓存因子类型">
                    <el-select v-model="form.PARAMTYPE" clearable placeholder="请选择缓存因子类型" @change="changeParamType()">
                      <el-option v-for="item in STATICOBJECTLIST" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="KEYNAME" label="监控KEY名称">
                    <el-select v-model="form.KEYNAME" filterable clearable placeholder="请选择监控KEY名称" @change="findLevel()">
                      <el-option v-for="item in KEYNAMEList1" :key="item.ID" :label="item.KEYNAME" :value="item.KEYNAME"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="缓存因子名称" prop="PARAMNAME">
                    <el-select v-model="form.PARAMNAME" filterable clearable placeholder="请选择缓存因子类型" @change="findParamName()" :disabled="form.KEYNAME==''||form.KEYNAME==null">
                      <el-option v-for="(item,index) in PARAMNAMEList" :key="item.ID" :label="item.PARAMNAME" :value="item.PARAMNAME"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="缓存因子KEY值" prop="PARAMKEY">
                    <el-input v-model="form.PARAMKEY" placeholder="请输入缓存因子KEY值" disabled></el-input>
                  </el-form-item>
                </el-col>
                 <el-col :span="12">
                  <el-form-item label="缓存标识" prop="CACHEFLAG">
                    <el-select v-model="form.CACHEFLAG" clearable placeholder="请选择缓存标识">
                      <el-option v-for="item in STATUSLIST" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>    
                <el-col :span="12">
                  <el-form-item prop="REMARK" label="备注：">
                    <el-input v-model="form.REMARK" placeholder="请输入备注" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click='addType'>取消</el-button> 
            <el-button type="primary" size="mini" @click="add">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import requestYg from "@/common/utils/requestYg";
import cacheFactor from "@/message/paramManagement/cacheFactorSetting/queryCacheFactor";
import queryfactorToMaintain from "@/message/paramManagement/factorToMaintain/queryfactorToMaintain";
export default {
  name: "",
  data() {
    return {
      KEYNAMEList: [],  // 全部监控因子key值
      KEYNAMEList1: [], // 根据坐席查询到的监控因子key
      STATICOBJECTLIST: [{
          name: "坐席",
          value: "agent"
        },
        {
          name: "队列",
          value: "queue"
        },
      ],
      loading: false,
      STATUSLIST: [{
          name: "是",
          value: "0"
        },
        {
          name: "否",
          value: "1"
        },
      ],
      form:{
        ID: '',
        KEYNAME: '',
        PARAMTYPE: '',
        PARAMNAME: '',
        PARAMKEY: '',
        CACHEFLAG: '',
        REMARK: '',
        PAGEFLAG: '',
        CURRPAGE: '',
        PAGEROWNUM: '',
      },
      rules: {
        KEYNAME: [
          {
            required: true,
            message: "请选择监控KEY名称",
            trigger: "change"
          }
        ],
        PARAMTYPE: [
          {
            required: true,
            message: "请选择缓存因子类型",
            trigger: "change"
          }
        ],
        PARAMNAME: [
          {
            required: true,
            message: "请选择缓存因子名称",
            trigger: "change"
          }
        ],
        PARAMKEY: [
          {
            required: true,
            message: "请输入缓存因子KEY",
            trigger: "blur"
          }
        ],
      },
      PARAMNAMEList: [],
      Level: '', //等级
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  components: {
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created: function() {
    
  },
  watch: {
  },
  methods: {
    changeParamType(){
      this.form.PARAMKEY = '';
      this.form.PARAMNAME = '';
      this.form.KEYNAME = '';
      this.PARAMNAMEList = [];
      this.KEYNAMEList1 = [];
      if(this.form.PARAMTYPE){
        this.findKEYNAMEList();
      } 
    },
    findKEYNAMEList(){
      this.KEYNAMEList.forEach(item=>{
        if(item.KEYTYPE == this.form.PARAMTYPE){
          this.KEYNAMEList1.push(item);
        }
      })
    },
    // 找出监控KEY名称对应的等级
    findLevel(){
      this.Level = '';
      for(var i=0;i<this.KEYNAMEList1.length;i++){
        if(this.KEYNAMEList1[i].KEYNAME == this.form.KEYNAME){
          this.Level = this.KEYNAMEList1[i].KEYLEVEL;
          break;
        }
      }
      this.queryfactorToMaintain();
    },
    // 缓存名称变化时,获取到缓存因子key值
    findParamName(){
      this.form.PARAMKEY = '';
      this.PARAMNAMEList.forEach(item=>{
        if(item.PARAMNAME == this.form.PARAMNAME){
          this.form.PARAMKEY = item.PARAMKEY;
          return;
        }
      })
    },
    // 根据因子类型,获取对应的因子
    async queryfactorToMaintain(){                                                                                                           
      let resBody = new queryfactorToMaintain();
      resBody.data.PARAMTYPE = this.form.PARAMTYPE;
      resBody.data.PARAMLEVEL = this.form.PARAMTYPE != 'queue'?this.Level:'';
      resBody.data.STATUS = '1'
      resBody.data.PAGEFLAG = 4;
      resBody.data.PAGEROWNUM = 1000;
      resBody.data.CURRPAGE = 1;
      requestYg(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.PARAMNAMEList = response.RSP_BODY.struct || [];
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.states=[];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 根据因子类型,获取对应的监控因子key值
    add() {
      //添加或修改
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          let resBody = new cacheFactor();
          resBody.data.OPERFLAG = this.option.log == "1" ? 'I' : 'U';
          resBody.data.ID = this.option.log == "1" ? '' : this.form.ID;
          resBody.data.KEYNAME = this.form.KEYNAME;
          resBody.data.PARAMTYPE = this.form.PARAMTYPE;
          resBody.data.PARAMNAME = this.form.PARAMNAME;
          resBody.data.PARAMKEY = this.form.PARAMKEY;
          resBody.data.CACHEFLAG = this.form.CACHEFLAG;
          resBody.data.REMARK = this.form.REMARK;
            requestYg(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  let mes=this.option.log=="1"?"新增":"修改";
                  this.$message({
                    type: "success",
                    message: `缓存因子参数${mes}${response.SYS_HEAD.ReturnMessage}!`
                  });
                   this.isShow = false;
                }else{
                  this.$message({
                    type: "error",
                    message: `${response.SYS_HEAD.ReturnMessage}!`
                  });
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              });
              this.$refs.form.clearValidate(); //清楚表单验证
              this.$refs.form.resetFields();
        } else {
          this.$message({
            type: "warning",
            message: "新增缓存因子参数请输入合法的数据！"
          });
          return false;
        }
      });
    },
    openCreate() {
      //打开弹窗事件
      this.$nextTick(function () {
        this.KEYNAMEList = this.option.KEYNAMEList;
        if (this.option.log == "2") {
          this.updateDate();
          this.queryfactorToMaintain();
        }else{
          this.form = {
            ID: '',
            KEYNAME: '',
            PARAMTYPE: '',
            PARAMNAME: '',
            PARAMKEY: '',
            CACHEFLAG: '',
            REMARK: '',
            PAGEFLAG: '',
            CURRPAGE: '',
            PAGEROWNUM: '',
          };
        }
      })
    },
    updateDate() {
      this.form = JSON.parse(JSON.stringify(this.option.currentRow));
    },
    closeUser() {
      //关闭弹窗清楚表单数据并清楚表单验证
      // 重置表单数据
      this.$refs.form.clearValidate(); //清楚表单验证
      this.$refs.form.resetFields();
      this.$emit("refreshTable");
      this.PARAMNAMEList = [];
    },
    addType() { //关闭弹窗事件，清楚表单验证
      this.option.isShow = false;
      // this.$refs.form.clearValidate();
      // this.$refs.form.resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
}

.require {
  color: red;
}

.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
  font-size: 18px;
}

.role {
  width: 95%;
  border: 1px solid #eee;
  border-radius: 4px;
  height: 290px;

  .roleHeader {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    background: #f5f7fa;
    height: 42px;
    box-sizing: border-box;
    padding: 9px;
    overflow-y: auto;
  }
}

.el-card {
  overflow: inherit;
}
</style>
